<template>
  <zm-view>
    <u-sticky offset-top="0" custom-nav-height="0">
      <zm-tabs v-model="planDate" :list="cinemaPlanDate" scrollable inactive-weight="bold" active-weight="bold" @change="handlePlanDateChange"></zm-tabs>
      <view class="flex items-center bg-white">
        <cinema-filter-bar :default-data="filterForm" :params="{ filmCode }" custom-class="flex-1" @filter="handleFilter"></cinema-filter-bar>
        <view class="flex mr-24">
          <zm-icon name="search" size="32rpx" @click="isSearch = true"></zm-icon>
        </view>
      </view>
      <view v-if="isSearch" class="flex items-center p-24 bg-white">
        <u-search v-model="keyWord" placeholder="请输入影院名称" :show-action="false"></u-search>
        <view class="ml-24" @click="handleCancel">取消</view>
      </view>
    </u-sticky>

    <zm-empty :show="filterCinemaList.length == 0 && !loading" text="暂无影院" margin="0 0 300rpx 0"></zm-empty>
    <view v-for="item in filterCinemaList" :key="item.cinemaId" class="mx-24 mt-20">
      <cinema-card-horizontal :data="item" @click="handleClickCinema(item)"> </cinema-card-horizontal>
    </view>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import { mapGetters } from "vuex"
export default {
  mixins: [page],
  data() {
    return {
      publishDate: "",
      init: false,
      keyWord: "",
      loading: false,
      filmId: "",
      filmName: "",
      filmCode: "",
      isSearch: false,
      cinemaList: [],
      cinemaPlanDate: [],
      planDate: "",
      filterForm: { countyId: "", countyName: "区域", sort: "distance", sortName: "距离近", timeId: "", lineId: "", lineName: "品牌", cinemaTagId: "", hallTypeId: "" }
    }
  },
  computed: {
    ...mapGetters(["location"]),
    filterCinemaList() {
      return this.cinemaList.filter((item) => {
        return item.cinemaName.indexOf(this.keyWord) !== -1
      })
    }
  },
  onLoad(options) {
    this.filmId = options.filmId
    this.filmCode = options.filmCode
    this.filmName = options.filmName
    this.publishDate = options.publishDate
  },
  onShow() {
    uni.setNavigationBarTitle({ title: this.filmName })
    this.handleGetCinemaPlanDate()
  },
  methods: {
    handleFilter(data) {
      this.filterForm = uni.$merge(this.filterForm, data)
      this.handleGetCinemaList()
    },
    // 排期改变
    handlePlanDateChange() {
      this.cinemaList = []
      this.handleGetCinemaList()
    },
    handleCancel() {
      this.isSearch = false
      this.keyWord = ""
    },
    // 点击影院
    handleClickCinema(item) {
      if (item) {
        this.toView({
          url: "pages/cinema/cinema-schedule/cinema-schedule",
          params: { filmId: this.filmId, cinemaId: item.cinemaId, activityId: this.activityId, planDate: this.planDate }
        })
      }
    },
    // 获取电影排期
    async handleGetCinemaPlanDate() {
      const res = await uni.$api.plan.cinemaPlanDate({ filmCode: this.filmCode, isFill: 0 })
      // 预售日期特殊处理，删除没有排期的日期
      // const index = res.findIndex((item) => {
      //   return item == this.publishDate + ""
      // })
      // const planDate = index > -1 ? res.splice(index) : res
      if (res?.length) {
        if (!this.init) this.planDate = res[0]
        this.init = true
        this.cinemaPlanDate = res.map((text) => {
          return { text: uni.$formatDayWeekDesc(text) + " " + uni.$formatDate(text, "MM月DD日"), value: text }
        })
        this.handleGetCinemaList()
      }
    },
    // 获取影院列表
    async handleGetCinemaList() {
      this.loading = true
      uni.$loading(true)
      const res = await uni.$api.cinema.cinemaList({ filmId: this.filmId, filmCode: this.filmCode, planDate: this.planDate, ...this.filterForm })
      uni.$loading(false)
      this.loading = false
      this.cinemaList = res
        .map((item) => {
          return { ...item, distance: uni.$calculateDistance(this.location.latitude, this.location.longitude, item.latitude, item.longitude) }
        })
        .sort((a, b) => {
          if (a.collectionType == 1 && b.collectionType != 1) {
            return -1
          } else if (a.collectionType != 1 && b.collectionType == 1) {
            return 1
          } else {
            return a[this.filterForm.sort] - b[this.filterForm.sort]
          }
        })
      const find = this.cinemaList.find((item) => item.cinemaCode == "35010731")
      const findIndex = this.cinemaList.findIndex((item) => item.cinemaCode == "35010731")
      if (findIndex && find && find.distance <= 3000) {
        const last = this.cinemaList.findLastIndex((item) => item.collectionType == 1)
        this.cinemaList.splice(findIndex, 1)
        if (last >= 0 && find.collectionType != 1) {
          this.cinemaList.splice(last + 1, 0, find)
        } else {
          this.cinemaList.unshift(find)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sticky {
  background-color: transparent;
  position: sticky;
  z-index: 970;
  top: 0;
}
</style>
